<seed-content #content class="default-bg">
  <seed-toolbar-header>
    <seed-toolbar-title>确认订单</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
 <div class="seed-order-detail-warp order-confirm-box">
   <!-- 订单信息-->
    <div class="order-info">
      <p class="order-title" *ngIf="ticketSkuDetail" >
        <img [src]="ticketSkuDetail.ticket.sellerHeadImg " seed-load-img>
        <span>{{ticketSkuDetail.ticket.sellerName}}</span>
      </p>
      <div class="order-content">
        <p class="content-img">
          <seed-img  *ngIf="ticketSkuDetail?.ticket" [lazyLoadImg]="ticketSkuDetail?.ticket.imgList[0]?.goodsLargeUrl"
                     [background]="true" [defaultImg]="'middle'"> </seed-img>
        </p>
        <div class="content-name">
          <div>{{ticketSkuDetail?.ticket.name}}</div>
        </div>
        <div class="content-price">
          <p class="price">￥{{ticketSkuDetail?.price  | twoDotPrice}}</p>
          <p class="num"><span></span>{{num}}</p>
        </div>
      </div>
      <div class="simple-count">
        共<span class="num bcolor">{{num}}</span>件商品,小计：
        <span class="price bcolor">{{(ticketSkuDetail?.price * num) | twoDotPrice}}</span>
      </div>
    </div>
    <seed-item class=" seed-item-block seed-underline pay-type" (click)="modal1.show()"
               *ngIf=" ticketSkuDetail?.price !== 0">
      <span>优惠券</span>
      <span class="seed-flexbox coupons-amount seed-flexbox-align-center" >
        <i *ngIf="!choose">
          {{ couponTotal? couponTotal: 0 }} 张可用
          <seed-icon color="c4" name="icon-arrow-right"></seed-icon>
        </i>
        <i *ngIf="choose"> -￥{{ couponValue | twoDotPrice }} </i>
      </span>
    </seed-item>
   <div>
     <form [formGroup]="ticketsForm">
       <seed-form-select
         [title]="'取票方式'"
         (valueChange)="ticketChange($event)"
         [arr]="ticketTypes"
         formControlName="obtainType" [needBlur]="false"
         ngDefaultControl>
       </seed-form-select>
    <div  class="tickets-form" *ngIf="ticketInfo">
        <div class="group seed-underline">
          <em>姓名</em>
          <div class="content">
            <input type="text" placeholder="请输入真实姓名(必填)" maxlength="25"  formControlName="name">
            <p class="error-tip" *ngIf="ticketsForm.controls['name'].touched && ticketsForm.controls['name'].invalid ">请输入真实姓名</p>
          </div>
        </div>
        <div class="group seed-underline">
          <em>手机号</em>
          <div>
            <input type="phone" placeholder="请输入手机号码(必填)"  maxlength="11"  formControlName="phone">
           <p class="error-tip" *ngIf="ticketsForm.controls['phone'].touched && ticketsForm.controls['phone'].invalid">请输入正确的手机号</p>
          </div>
        </div>
        <div class="group seed-underline" *ngIf="ticketAddress">
          <em>详细地址</em>
          <div class="contect-input">
            <input type="text" placeholder="请输入详细收货地址(必填)" maxlength="120" formControlName="address" >
           <p class="error-tip" *ngIf="ticketsForm.controls['address'].touched && ticketsForm.controls['address'].invalid">请输入详细地址</p>
          </div>
        </div>
        <div class="group seed-underline" *ngIf="ticketSkuDetail.ticket.needIdNo == true">
          <em>身份证号</em>
          <div>
            <input type="text" placeholder="请填写身份证号(必填)"  maxlength="18" formControlName="ID" >
            <p class="error-tip" *ngIf="ticketsForm.controls['ID'].touched && ticketsForm.controls['ID'].invalid">请输入有效身份证号</p>
          </div>
        </div>

    </div>
   </form>
  </div>

  <!--确认-->
  <div class="btn-wrap-confim-order seed-scroll-outside"  #btnWrap id="btn-wrap" >
    <p class="p-info">
      共<span class="num bcolor">{{num}}</span>
      件商品，合计：
      <span class="price bcolor" *ngIf="!totalPrice">{{(ticketSkuDetail?.price * num) | intPrice}}.</span>
      <span class="dian bcolor" *ngIf="!totalPrice">{{(ticketSkuDetail?.price * num) | decimalPrice}}</span>
      <span class="price bcolor" *ngIf="totalPrice">{{(totalPrice * num) | intPrice}}.</span>
      <span class="dian bcolor" *ngIf="totalPrice">{{(totalPrice * num) | decimalPrice}}</span>
    </p>
    <div class="sub-btn-pay">
      <button  (click)="postSubmitTicket()" [disabled]="ticketsForm.invalid">
        提交订单
      </button>
    </div>
  </div>

 <!-- 领取优惠券-->
  <seed-modal #modal1 [content]="content" >
    <div class="seed-coupon-choose seed-modal-content seed-flexbox seed-flexbox-column">
      <seed-toolbar-header>
        <seed-toolbar-title>选择优惠券</seed-toolbar-title>
        <seed-toolbar-menu></seed-toolbar-menu>
        <em class="coupon-explain" (click)="goToCouponExplain()"></em>
      </seed-toolbar-header>
      <seed-infinite-scroll >
        <div class="couponList" *ngFor="let coupon of usableCouponList; let i = index;">
          <seed-coupon-card [coupon]="coupon" class="seed-modal-content" [markType]="2" [choose]="i === cardChooseIndex"
                            (goToDetail)="chooseCoupon( coupon.codeId, coupon.couponValue, i )" >
          </seed-coupon-card>
        </div>
        <seed-infinite-scroll-content class="load-bg" *ngIf="usableCouponList.length > 5"></seed-infinite-scroll-content>
      </seed-infinite-scroll>
      <missing-default-content *ngIf="usableCouponList.length==0"></missing-default-content>
    </div>
  </seed-modal>
 </div>
</seed-content>


